<template>
  <div class="homelist">
    <ul class="list">
      <li v-for="item in homeGoods" :key="item.id">
        <div class="pic">
          <img :src="item.img" alt="">
        </div>
       <div class="bom">
          <h1>{{item.name}}</h1>
          <p>{{item.content}}</p>
          <h2>￥{{item.price}}</h2>
       </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { reqhomeList } from '@/api/index'
export default {
  data () {
    return {
      homeGoods: []
    }
  },
  methods: {
    async getreqhomeData () {
      const res = await reqhomeList()
      console.log(res)
      this.homeGoods = res
    }
  },
  mounted () {
    this.getreqhomeData()
  }
}
</script>

<style lang='less' scoped>
  .homelist{
    width: 100%;
    height: 100%;
    padding-bottom: 1.5rem;
    .list{
      width: 3.63rem;
      height: 100%;
      padding: 0.06rem;
      display: flex;
      flex-wrap: wrap;
      li{
        width: 1.8rem;
        height: 2.54rem;
      }
    }
  }
  .homelist ul li{
    .bom{
      padding-left: .1rem;
    }
    img{
      width: 1.75rem;
      height: 1.75rem;
    }
    h1{
      font-size: .16rem;
      font-weight: 400;
      color: #070707;
      line-height: .24rem;
    }
    h2{
      font-size: .12rem;
      color: #E95D56;
    }
    p{
      color: #9E9E9E;
    }
  }
</style>
